<template>
  <div>
    <span v-if="column.plainType === ColumnType.IMAGE" style="height: 50px">
      <el-image
        :style="{borderRadius:column.borderRadius||'0px'}"
        fit="cover"
        v-if="text"
        :src="text"
        :preview-src-list="[text]"
        class="column-image"
      />
      <span v-else></span>
    </span>
    <div v-else-if="column.viewAsLink" style="margin-top: -2px">
      <el-link :href="text" v-if="text" type="primary" target="_blank">链接跳转</el-link>
    </div>
    <span v-else>{{ text }}</span>
  </div>
</template>

<script>
import ColumnType from '@/framework/constant/ColumnType'
import ColumnUtil from '@/framework/components/table/ColumnUtil'

export default {
  name: 'PlainText',
  props: {
    column: {
      type: Object,
      default: null
    },
    value: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      ColumnType,
      text: ''
    }
  },
  watch: {
    async value() {
      this.text = await this.getText()
    }
  },
  async created() {
    this.text = await this.getText()
  },
  methods: {
    async getText() {
      return ColumnUtil.getText(this.column, this.value)
    }
  }
}
</script>

<style scoped lang="scss">
.column-image {
  width: 80px;
  height: 80px;
}
</style>
